<!DOCTYPE html>
<html lang="en" ng-app="app" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>TERM-后台管理系统</title>
    <link th:href="@{/static/images/term.ico}" th:mce_href="images/tab_icon.ico" rel="icon" type="image/x-icon"/>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/lib/bootstrap-datetimepicker.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/main.css"/>
    <link rel="stylesheet" type="text/css" href="/static/lib/bootstrapValidator.min.css"/>
    <style>
        .iframe-context{
            width: 100%;
            position: absolute;
            top: 169px;
            left: 0;
        }
        .iframe-search{
            width: 100%;
            position: absolute;
            top: 113px;
            left: 0;
        }
        .form-horizontal .form-group{
            margin: 37px 0 0 0;
        }
        button[type="button"]{
            margin-left: 199px;
            margin-top: 37px;
        }
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
            padding: 18px;
            line-height: 1.42857143;
            vertical-align: middle;
            border-top: 1px solid #ddd;
        }
        .table>tbody>tr {
            height: 20px;
            border-bottom: 1px solid #d7d7d7;
        }
        .table>thead>tr>th {
            text-align: center;
        }
        [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
            display: none !important;
        }
        .line{
            border-bottom: 1px solid #d7d7d7;
            margin-top: 21px;
        }
        a{
            color: #d84527;
        }
    </style>
</head>

<body ng-controller="companyListController">
<div class="header" th:include="header"></div>
<div class="iframe-search">
    <form id="companyForm" class="form-horizontal" novalidate="novalidate" th:action="@{/term/company/list}" method="post">
        <div class="input-group" style="margin-left: 20px">
            <div class="col-xs-5">
                <input type="text" name="name" th:value="${query.name}" class="form-control input-sm-3" style="border-radius: 4px" placeholder="公司名"/>
            </div>
            <div class="col-xs-5">
                <input type="text" name="contacts" th:value="${query.contacts}" class="form-control input-sm-3" style="border-radius: 4px" placeholder="对接人姓名"/>
            </div>
            <button type="submit" class="btn btn-primary" ng-click="search($event)">搜索</button>
        </div>
    </form>
    <div class="line"></div>
</div>

<div class="iframe-context">
    <table class="table table-hover" style="text-align: center;">
        <thead style="background-color: #d7d7d7;">
            <tr>
                <th style="width: 10%">ID</th>
                <th style="width: 10%">公司名称</th>
                <th style="width: 20%">公司地址</th>
                <th style="width: 10%">对接人姓名</th>
                <th style="width: 10%">对接人手机号</th>
                <th style="width: 10%">邮箱</th>
                <th style="width: 10%">备用联系方式</th>
                <th style="width: 20%">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr style="height: 20px" th:each="company:${page.subViews}">
                <td th:text="${company.value.id}"></td>
                <td th:text="${company.value.name}"></td>
                <td th:text="${company.value.address}"></td>
                <td th:text="${company.value.contacts}"></td>
                <td th:text="${company.value.mobile}"></td>
                <td th:text="${company.value.email}"></td>
                <td th:text="${company.value.link}"></td>
                <td>
                    <a class="decoration" th:href="@{'/term/company/detail/' + ${company.value.id}}" style="text-decoration: none">查看|操作</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div class="table_footer">
    <a class="add" th:href="@{/term/company/add}">添加公司</a>
    <div class='pager-page'>
        <span th:if="${page.pageIndex &gt; 2}" class='pager-dleft' action-type="page" data-value="1"></span>
        <span th:if="${page.pageIndex &gt; 1}" class='pager-left' action-type="page" th:attr="data-value=${page.pageIndex-1}"></span>
        <span th:if="${(page.pageIndex - page.limit) &gt; 1}">...</span>
        <span th:each="item : ${#numbers.sequence(page.start, page.end)}" action-type="page"
              th:text="((${page.getPageCount() eq 1}) ? '' : ${item})" th:attr="data-value=((${page.getPageCount() eq 1}) ? '' : ${item})"></span>
        <span th:if="${(page.pageIndex + page.limit) &lt; page.pageCount}">...</span>
        <span th:if="${page.pageIndex &lt; page.pageCount}" class='pager-right' action-type="page" th:attr="data-value=${page.pageIndex+1}"></span>
        <span th:if="${page.pageIndex &lt; page.pageCount-1}" class='pager-dright' action-type="page" th:attr="data-value=${page.pageCount}"></span>
    </div>
</div>
<script type="text/javascript" src="/static/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/lib/angular.min.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/static/lib/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="/static/lib/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="/static/js/ngPlugin-unCompress.4f7c7e4.js"></script>
<script type="text/javascript" src="/static/js/pagination.js"></script>
<script type="text/javascript" th:inline="javascript">
    // 调用分页函数
    //    <![CDATA[
    window.onload = function () {
        pagination([[${query}]], '/term/company/list');
    };
    var app = angular.module('app', ['ngPlugin']);
    app.controller('companyListController', ['$scope', '$http', 'ngSubmit', function ($scope, $http, ngSubmit) {
        $scope.search = function ($event) {
            $event.preventDefault();
            $('#companyForm').submit();
        }
    }]);


    //    ]]>

</script>
</body>
</html>